<style lang="scss">
  @import "../../../utils/base.scss";

  .myLabel:before {
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
  }
</style>
<template>
  <div>
    <!-- 基本信息 -->
    <template id="startegies">
      <!-- 附件 -->
      <!-- <template>
                <component ref="file" :is="'file'" :ifedit="ifedit" :filesList="PfilesList" :Papply="networkInfo"></component>
            </template> -->
      <Table ref="startegies" :columns="netMapColumns" :data="networkInfo.strategies" border>

        <template slot-scope="{ row, index }" slot="ip">
          <p v-if="ifedit">{{networkInfo.strategies[index].ip}}</p>
          <Input v-else v-model="networkInfo.strategies[index].ip" @on-blur="checkIP(networkInfo.strategies[index].ip,index)"
            :readonly="ifedit" />
        </template>

        <template slot-scope="{ row, index }" slot="serverType">
          <p v-if="ifedit">{{networkInfo.strategies[index].serverType}}</p>
          <Select v-else v-model="networkInfo.strategies[index].serverType" :disabled="ifedit" :transfer='true' style="z-index:99999">
            <Option v-for="item in serverTypeList" :value="item.key">{{item.name}}</Option>
          </Select>
        </template>

        <template slot-scope="{ row, index }" slot="mapIp">
          <!-- {{ifmap}} -->
          <div v-if="networkInfo.strategies[index].mapIp==''">
            <p>{{'网络接口人填写'}}</p>
          </div>
          <div v-else>
            <p>{{networkInfo.strategies[index].mapIp}}</p>
            <!-- <Input v-else v-model="networkInfo.strategies[index].mapIp"  :readonly="isEdit!=18" /> -->
          </div>

        </template>
        <!-- <template v-if="isEdit!=1" slot-scope="{ row, index }" slot="mapIp">
                    {{ifmap}}
                    <p>{{'网络接口人填写'}}</p>
                </template> -->

        <template slot-scope="{ row, index }" slot="action">
          <Button v-if="!ifedit" @click="deleteRow(row, index)">删除</Button>
        </template>
      </Table>

    </template>

  </div>
</template>
<script>
  import ajax from "../../../ajax_util"
  import Axios from 'axios'
  import {
    mavonEditor
  } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  import file from '../settledin/file'

  export default {
    name: "apply",
    components: {
      mavonEditor,
      file
    },
    data() {
      const validateEntryEndTime = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择期望完成时间'));
        } else {
          if (this.networkInfo.startTime === '') {
            callback(new Error('请选择工单发起时间'));
          } else if (this.networkInfo.startTime.getTime() > value.getTime()) {
            callback(new Error('期望完成时间不能小于工单发起时间'));
          } else {
            callback()
          }
        }
      };

      return {
        serverTypeList: [],
        IP_CHECK: [],
        reqId: "",
        mdvalue: "",
        dataInfoEdit: 0,
        showFileMould: false,
        httpHeader: {
          Authorization: this.$store.state.token
        },
        disabledDate: {
          disabledDate(date) {
            return date && date.valueOf() < Date.now();
          }
        },
        networkInfoValidate: {
          _startTime: [{
            required: true,
            type: 'date',
            message: '请选择工单开始日期',
            trigger: 'change'
          }, ],
          _hopeTime: [{
            required: true,
            validator: validateEntryEndTime,
            trigger: 'blur'
          }],
          startTime: [{
            required: true,
            type: 'date',
            message: '请选择计划开始日期',
            trigger: 'change'
          }, ],
          title: [{
            required: true,
            type: 'string',
            message: '请输入工单标题:',
            trigger: 'blur'
          }, ],
          system: [{
            required: true,
            type: 'string',
            message: '请输入开通的系统:',
            trigger: 'blur'
          }, ],
          sysContact: [{
            required: true,
            type: 'string',
            message: '请输入业支联系人',
            trigger: 'blur'
          }, ],
          sysPhone: [{
              required: true,
              message: '请输入业支联系人电话:',
              trigger: 'blur'
            },
            {
              type: 'string',
              pattern: /^[1][0-9]{10}$/,
              message: '请输入正确的联系方式',
              trigger: 'blur'
            }
          ],
          sysMail: [{
              required: true,
              message: '请输入联系人邮箱:',
              trigger: 'blur'
            },
            {
              type: 'string',
              pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
              message: '请输入正确的邮箱',
              trigger: 'blur'
            }
          ],
          reqDes: [{
            required: true,
            type: 'string',
            message: '请输入申请描述:',
            trigger: 'blur'
          }, ],
          // plan: [
          //     {required: true,type: 'string', message: '请输入申请计划:', trigger: 'blur'},
          // ],
        },

        fileUrl: this.CONFIG.file_url,
        readonly: true, //是否只读
        labelWidth: 140,
        bealoonTrue: true,
        file: null,
        loadingStatus: false,
        fileUpLoadAction: "",
        name: "",
        istrue: true,
        networkInfo: this.Papply,
        filesList: this.PfilesList,

        ifmap: this.isEdit,
        strategies: [],
        netMapColumns: [{
            title: "ip",
            align: "center",
            width: 150,
            key: "ip",
            slot: "ip",
            // fixed: 'left'
          },
          {
            title: "主机类型",
            align: "center",
            width: 150,
            key: "serverType",
            slot: "serverType",
          },
          {
            title: "映射ip",
            align: "center",
            // width: 140,
            key: "mapIp",
            slot: "mapIp",
          },
          {
            slot: 'action',
            align: 'center',
            width: 150,
            // fixed: 'right',
            renderHeader: (h, index) => {
              return h('div', [
                h(!this.ifedit ? 'Button' : "", {
                  props: {
                    type: 'primary',
                    // size: 'small'
                  },
                  on: {
                    click: () => {
                      if (!this.ifedit) {
                        this.addRow()
                      }
                    }
                  }
                }, !this.ifedit ? '新增' : "")
              ])
            }
          },
        ],
      }
    },
    created: function() {
      this.serverTypeList = this.UTILSJSON.netmap
      console.log("------------>", this.severColumns, this.UTILSJSON.positionList);
      var temp = []
      if (this.networkInfo.strategies.length > 0) {
        this.networkInfo.strategies.forEach(i => {
          let ipRegex =
            /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
          if (ipRegex.test(i.ip) === false) {
            temp.push(false)
          } else {
            temp.push(true)
          }
        })
      }
      this.IP_CHECK = temp
    },
    mounted: function() {
      this.$nextTick(() => {
        console.log('isEdit', this.isEdit)
        console.log('ifedit', this.ifedit)
        this.networkInfo = this.Papply
        this.ifmap = this.isEdit

      })
    },

    methods: {
      checkIP(data, index) {
        var result = false
        console.log("====data====", data);
        console.log("====index====", index);
        if (data == '') {
          this.$Message.error('请输入ip地址！')
        } else {
          let ipRegex =
            /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
          if (ipRegex.test(data) === false) {
            this.$Message.error('输入IP格式有误，请重新输入！')
          } else {
            result = true
          }
        }
        this.IP_CHECK[index] = result
      },
      addRow() {
        this.networkInfo.strategies.push({
          'ip': '',
          'serverType': '',
          'mapIp': '',
        })
      },
      deleteRow(roew, index) { //删除资源清单
        this.networkInfo.strategies.splice(index, 1);
        this.IP_CHECK.splice(index, 1);
      },

      validate() {
        var isSubmit = false
        this.$refs["startegies"].validate((valid) => {
          if (valid) {
            isSubmit = true
          } else {
            this.$refs.base.scrollTop = document.getElementById("startegies").offsetTop - 100
            this.$Message.error('请填写必填项');
          }
        })
        console.log('IP_CHECK', this.IP_CHECK)
        this.IP_CHECK.forEach(item => {
          if (item == false) {
            this.$Message.error('请规范填写ip');
            isSubmit = false
          }
        })
        return isSubmit
      },

      getFiles() {
        return this.$refs.file.getFiles()
      },
      //格式化日期
      formatDate(value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear();
        var month = this.padDate(date.getMonth() + 1);
        var day = this.padDate(date.getDate());
        return year + '-' + month + '-' + day;
      },
      padDate(value) {
        return value < 10 ? '0' + value : value;
      },

      // addNetworkInfoList(){
      //     console.log('this.networkInfo',this.networkInfo)
      //     this.networkInfo.startegies.push(
      //         {
      //             "appProtocol": "",
      //             "direction": "",
      //             "netId": "",
      //             "oriAddr": "",
      //             "oriMapAddr": "",
      //             "oriPortFrom": "",
      //             "oriPortTo": "",
      //             "purpose": "",

      //             "targetAddr": "",
      //             "targetMapAddr": "",
      //             "targetPortTo": "",
      //             "targetPortfrom": "",
      //             "tcpProtocol": "",
      //             "udpProtocol": ""
      //         }
      //     )
      // },
      // deleteList(row,index){
      //     this.networkInfo.startegies.splice(index,1)
      // },

    },
    props: {
      isEdit: {},
      ifedit: {},
      ishidden: {},
      severColumns: {},
      Papply: {},
      PfilesList: {},
    },
    //  computed:{
    //     ifmap(){
    //         return this.isEdit
    //     }
    // },
    watch: {
      isEdit(newV, old) {
        console.log("isEdit newV--------->", newV)
        this.ifmap = newV
      },
    }

  }
</script>
